<template>
    <el-dialog :title="titleMap[mode]" v-model="visible" width="70%" destroy-on-close @closed="$emit('closed')" align-center>
        <el-button type="primary" @click="print">打印</el-button>
        <el-main>
            <div class="printMain" ref="printMain">
                <div v-for="(item,index) in detail.list" :key="index">
                    <div v-if="index>=1" style="page-break-after: always"></div>
                    <div  style="display:flex;align-items: flex-start;">
                        <table style="border-collapse: collapse;width:100vw;border-spacing: 0;">
                            <thead style="margin-top: 20px; display: table-header-group;">
                                <tr style="display:block;margin:30px;"></tr>
                                <tr>
                                    <th class="thCss" colspan="7" style="font-size:30px">{{detail.factory.referred_as}}公司物料采购单</th>
                                </tr>
                                <tr>
                                    <th class="thCss">供应商</th>
                                    <th class="thCss" colspan="6" style="text-align: start;">{{item.referred_as}}</th>
                                </tr>
                                <tr>
                                    <th class="thCss">货品名称</th>
                                    <th class="thCss">色号</th>
                                    <th class="thCss">颜色</th>
                                    <th class="thCss">重量</th>
                                    <th class="thCss">批次号</th>
                                    <th class="thCss">订单号</th>
                                    <th class="thCss">下单时间</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item1,index1) in item.data" :key="index1">
                                    <td class="thCss">{{item1.material_name}}</td>
                                    <td class="thCss">{{item1.materialSpec&&item1.materialSpec.color_number}}</td>
                                    <td class="thCss">{{item1.materialSpec&&item1.materialSpec.colour}}</td>
                                    <td class="thCss">{{item1.num}}</td>
                                    <td class="thCss">
                                        <div v-for="(item2,index2) in item1.batch_number_arr" :key="index2">
                                            {{item2}}
                                        </div>
                                    </td>
                                    <td class="thCss">
                                        <div v-for="(item2,index2) in item1.order_no_arr" :key="index2">
                                            {{item2}}
                                        </div>
                                    </td>
                                    <td class="thCss">{{item1.create_time}}</td>
                                </tr>
                                <tr>
                                    <td class="thCss">合计</td>
                                    <td class="thCss"></td>
                                    <td class="thCss"></td>
                                    <td class="thCss">{{item.total_weight}}</td>
                                    <td class="thCss"></td>
                                    <td class="thCss"></td>
                                    <td class="thCss"></td>
                                </tr>
                                <div style="page-break-before: always;"></div>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </el-main>
    </el-dialog>
</template>

<script>
	import print from '@/utils/print'
	export default {
		name: 'print',
		data() {
			return {
                mode: "add",
				titleMap: {
					add: '打印工艺单',
					show: '打印',
					over: '退货'
				},
				visible: false,
				isSaveing: false,
                detail:{},
                show:false
            }
		},
		methods: {
            //显示
			open(mode='add'){
				this.mode = mode;
				this.visible = true;
				return this
			},
            async setData(data){
                var res = await this.$API.print.shopOrderPrint.get(data);
                this.detail = res.data
			},
			print(){
				print(this.$refs.printMain)
                setTimeout(()=>{
                    this.visible = false
                },500)
			},
		}
	}
</script>

<style scoped lang="scss">
div{
    color: #000;
}
.thCss{
    border:1px solid #000000;
    text-align: center;
    padding: 10px;
    height: 50px;
    width: 120px;
}
table{
    tbody{
        font-size: 13px;
        tr {
            page-break-inside: avoid;
        }
    }
} 
</style>
